<template>
  <div>
    <Card title="角色设置">
      <div class="joininBox">
        <div class="iview-selectTitle">快速查询:</div>
        <Input
          size="large"
          search
          placeholder="请输入要查询的角色名称"
          enter-button="查询"
          @on-search="onSearch"
          v-model="fastQuery"
          style="width: 500px"
        />
      </div>
      <div class="joininBox">
        <Row class="ptop20">
          <Button icon="md-add" @click="popupBtn()">新增角色</Button>
        </Row>
      </div>
      <div class="joininBox">
        <Table
          class="mtop15 table-all-width"
          border
          :loading="tableLoading"
          :columns="cashierColumns"
          :data="cashierData"
        >
          <template slot-scope="{ row, index }" slot="actions">
            <div v-if="row.source== 0">
              <Button
                type="info"
                icon="md-create"
                size="small"
                style="margin-right: 5px"
                @click="editCashier(index)"
              >编辑</Button>
              <Button type="error" icon="md-trash" size="small" @click="delCashier(index)">删除</Button>
            </div>
            <div v-else>系统默认</div>
          </template>
        </Table>
        <div style="margin-top: 10px;overflow: hidden">
          <div style="float: right;">
            <Page
              :total="total"
              :current.sync="pageNum"
              :page-size="pageSize"
              show-sizer
              @on-change="changePage"
              @on-page-size-change="changePageSize"
            />
          </div>
        </div>
      </div>
    </Card>
    <!-- 新增、编辑弹窗 -->
    <Modal :mask-closable="false" v-model="showModalRole" @on-cancel="closeModal" :title="title">
      <Form ref="formItem" :model="formItem" :label-width="80" label-position="left" :rules="formRules" class="form-box">
        <FormItem label="角色名称" prop="roleName">
          <Input v-model="formItem.roleName" placeholder="请输入登录名"/>
        </FormItem>
        <Button :class="isSelectedWebAdmin?'role-category-business-selected':'role-category-business'" @click="handleBusinessBtnClick()" size="small">商家后台</Button>
        <Button :class="isSelectedWebAdmin?'role-category-app':'role-category-app-selected'" @click="handleAppBtnClick()" size="small">移动应用</Button>
        <FormItem label="权限设置" prop="roleAuthen" class="role-setting-item">
          <Tree
            v-if="isSelectedWebAdmin"
            ref="tree"
            :data="webAdminTreeData"
            class="treeMtop"
            @on-check-change="checkedId"
            show-checkbox
            @on-select-change="showSelect"
          ></Tree>
          <Tree
            v-else
            ref="tree"
            :data="mobileAppTreeData"
            class="treeMtop"
            @on-check-change="checkedId"
            show-checkbox
            @on-select-change="showSelect"
          ></Tree>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary" @click="handleSubmit('formItem')">确定</Button>
        <Button style="margin-left: 8px" @click="handleReset('formItem')">取消</Button>
      </div>
    </Modal>
    <Modal :mask-closable="false" v-model="modalDel" width="360">
      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="ios-information-circle"></Icon>
        <span>删除确认</span>
      </p>
      <div style="text-align:center">
        <p>确认删除此条记录？</p>
      </div>
      <div slot="footer">
        <Button type="error" size="large" long :loading="delLoading" @click="delSure">删除</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import storage from "@/libs/storage";
import { Format } from "@/assets/util";
import {
  storeRoleFindList,
  storeRoleDelete,
  findAllMenu,
  roleSave,
  roleUpdate,
  roleFindPage
} from "../../api/storeRole";
import { storeInfo } from '@/api/resetApi';
export default {
  data() {
    return {
      fastQuery: "",
      tableLoading: true,
      title: "新增角色",
      // 当前选择的权限类型是否是商家后台
      isSelectedWebAdmin: true,
      // table表格数据
      cashierData: [],
      // table 表头
      cashierColumns: [
        {
          title: "序号",
          type: "index",
          width: 80,
          minWidth: 80,
          align: "center"
        },
        {
          title: "角色名称",
          key: "roleName",
          align: "center"
        },
        {
          title: "创建时间",
          key: "createTime",
          align: "center"
        },
        {
          title: "状态",
          key: "roleStatus",
          align: "center",
          render: (h, params) => {
            return h("span", params.row.roleStatus == 1 ? "正常" : "禁用");
          }
        },
        {
          title: "操作",
          key: "registFlag",
          slot: "actions",
          align: "center"
        }
      ],
      // 权限数据
      oldTreeData: [],
      webAdminTreeData: [
        {
          title: "商家后台",
          id: "-1",
          expand: true,
          checked: false,
          children: []
        }
      ],
      mobileAppTreeData: [
        {
          title: "移动应用",
          id: "-1",
          expand: true,
          checked: false,
          children: []
        }
      ],
      // 表单验证
      formRules: {
        roleName: { required: true, message: "角色名称不能为空" },
        roleAuthen: { required: true, message: "权限设置不能为空" }
      },
      // 弹窗默认值
      formItem: {
        roleName: "",
        roleAuthen: ""
      },
      showModalRole: false, // 弹窗默认隐藏,
      currentChild: [],
      modalFlag: "add",
      modalDel: false,
      delLoading: false,
      isNeedShowSelected: false, // 是否需要显示已选择权限，在权限接口回调中处理
      isNeedShowCategory: { webAdmin: false, mobileApp: false }, // 需要展示的已选择的权限类型
      formIndex: -1,
      webAdminRoles: [],
      mobileAppRoles: [],
      webAdminTreeDataBak: [],
      mobileAppTreeDataBak: [],
      pageNum: 1,
      pageSize: 10,
      total: 0
    };
  },
  methods: {
    init() {
      this.getRoleList();
    },
    // 查询
    onSearch() {
      this.pageNum = 1;
      this.roleFindPage();
    },
    // 分页
    changePage(pageNum) {
      this.pageNum = pageNum;
      this.roleFindPage();
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.pageNum = 1;
      this.roleFindPage();
    },
    //   时间转换
    formatTime(time) {
      return Format(time, "yy-MM-dd hh:mm:ss");
    },
    //	触发新增角色
    popupBtn() {
      this.$refs["formItem"].resetFields();
      this.showModalRole = true;
      this.isNeedShowSelected = false;
      this.formItem.roleName = "";
      this.showModals("add");
      this.loadRoles();
    },
    // 加载权限菜单
    loadRoles() {
      let webAdminTreeDataChild = this.webAdminTreeData[0].children;
      let mobileAppTreeDataChild = this.mobileAppTreeData[0].children;

      if (webAdminTreeDataChild || webAdminTreeDataChild.length < 1 || mobileAppTreeDataChild || mobileAppTreeDataChild.length < 1) {
        let result = this.loadCacheRoles();
        if (!result) {
          this.findAllMenu();
        }
        return result;
      }
    },
    // 加载本地缓存的权限菜单
    loadCacheRoles() {
      let webAdminRolesJSON = localStorage.getItem('webAdminRoles');
      let mobileAppRolesJSON = localStorage.getItem('mobileAppRoles');

      if ((webAdminRolesJSON && webAdminRolesJSON != '') || (mobileAppRolesJSON && mobileAppRolesJSON != '')) {
        this.webAdminTreeDataBak = JSON.parse(webAdminRolesJSON);
        this.mobileAppTreeDataBak = JSON.parse(mobileAppRolesJSON);

        this.webAdminTreeData[0].children = this.webAdminTreeDataBak;
        this.mobileAppTreeData[0].children = this.mobileAppTreeDataBak;
        return true;
      } else {
        return false;
      }
    },
    // 点击子节点展开收起
    showSelect(treeData) {
      if (treeData.length === 1) {
        this.currentChild = treeData[0];
      }
      if (this.currentChild.id && this.currentChild.id == "-1") return false; // 禁止选择全选展开收起子级
      this.currentChild.expand = !this.currentChild.expand;
    },
    // 提交信息
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          if (this.modalFlag == "add") {
            this.addRole();
            if (this.isSelectedWebAdmin) {
              this.treeChangeExpand1(this.webAdminTreeData);
            } else {
              this.treeChangeExpand1(this.mobileAppTreeData);
            }
          } else if (this.modalFlag == "edit") {
            this.editCashierDate();
          }
        } else {
          this.$Message.error("请填写完整！");
        }
      });
    },
    // 新添信息
    addRole() {
      this.saveRole();
    },
    // 修改信息弹窗
    editCashier(index) {
      this.formIndex = index;
      this.showModals("edit");
      this.formItem.roleName = this.cashierData[index].roleName;
      this.formItem.roleAuthen = this.cashierData[index].menuAuthen;
      let loadCacheRolesResult = this.loadRoles();
      this.isNeedShowSelected = !loadCacheRolesResult;

      if (loadCacheRolesResult) {
        this.showSelectedRoles();
      }
    },
    // 显示选择的权限
    showSelectedRoles() {
      this.isNeedShowSelected = false;
      let roleAuthen = this.formItem.roleAuthen;
      let tid = [];
      if (roleAuthen.length > 0) {
        tid = roleAuthen.split(",");
        var reg = new RegExp('"', "g");
        for (var i = 0; i < tid.length; i++) {
          this.treeChangeExpand(this.webAdminTreeData, tid[i].replace(reg, ""), 'webAdmin');
          this.treeChangeExpand(this.mobileAppTreeData, tid[i].replace(reg, "", 'mobileApp'));
        }
        // 判断展示商家后台还是移动应用
        if (!this.isNeedShowCategory.webAdmin && this.isNeedShowCategory.mobileApp) {
          this.isSelectedWebAdmin = false;
        }
      }
    },
    treeChangeExpand(newDate, ids, source) {
      let _this = this;
      for (var i = 0; i < newDate.length; i++) {
        if (newDate[i].id == ids) {
          this.$set(newDate[i], "checked", true);
          if (source == 'webAdmin') {
            this.isNeedShowCategory.webAdmin = true;
          } else {
            this.isNeedShowCategory.mobileApp = true;
          }
        }
        if (newDate[i].children) {
          // 递归打开所有节点
          newDate[i].children = _this.treeChangeExpand(
            newDate[i].children,
            ids,
            source
          );
        }
      }
      return newDate;
    },
    treeChangeExpand1(newDate1) {
      let _this = this;
      for (var i = 0; i < newDate1.length; i++) {
        this.$set(newDate1[i], "checked", false);
        this.$set(newDate1[i], "indeterminate", false);
        if (newDate1[i].children) {
          // 递归打开所有节点
          newDate1[i].children = _this.treeChangeExpand1(newDate1[i].children);
        }
      }
      return newDate1;
    },
    // 保存修改信息
    editCashierDate() {
      this.modifyUpdate();
    },
    // 关闭弹窗
    closeModal() {
      this.handleReset("formItem");
      this.isSelectedWebAdmin = true;
      this.isNeedShowCategory = { webAdmin: false, mobileApp: false };
    },
    // 取消弹窗
    handleReset(name) {
      this.showModalRole = false;
      this.$refs[name].resetFields();
      this.formItem.roleName = "";
      if (this.isSelectedWebAdmin) {
        this.treeChangeExpand1(this.webAdminTreeData);
      } else {
        this.treeChangeExpand1(this.mobileAppTreeData);
      }
    },
    // 获取选中权限的ID
    checkedId() {
      let checkedList = this.$refs.tree.getCheckedNodes();
      let List = [];
      for (let i = 0; i < checkedList.length; i++) {
        List.push(checkedList[i].id);
        this.formItem.roleAuthen = JSON.stringify(List)
          .split("[")[1]
          .split("]")[0];
      }
    },
    // 设置弹窗唯一
    showModals(type) {
      this.modalFlag = type;
      this.title = this.setModalTitle(type);
      this.showModalRole = true;
    },
    // 删除
    delCashier(index) {
      this.formIndex = index;
      this.modalDel = true;
    },
    updateCashier() {
      this.cashierData.splice(this.formIndex, 1);
    },
    handleBusinessBtnClick(e) {
      this.isSelectedWebAdmin = true;
    },
    handleAppBtnClick() {
      this.isSelectedWebAdmin = false;
    },
    async delSure() {
      this.delLoading = true;
      let id = this.cashierData[this.formIndex].id;
      const { data, status } = await storeRoleDelete(id);
      if (data.code == 200 && status == 200) {
        this.updateCashier();
        this.delLoading = false;
        this.modalDel = false;
        this.formIndex = -1;
      } else {
        this.delLoading = false;
        this.modalDel = false;
        this.formIndex = -1;
        this.$Message.error({ content: data.message, duration: 4 });
      }
    },
    setModalTitle(type) {
      let title = "新增角色";
      switch (type) {
        case "add":
          title = "新增角色";
          break;
        case "edit":
          title = "修改角色信息";
          break;
        default:
          break;
      }
      return title;
    },
    // 角色列表
    async getRoleList() {
      let storeCode = this.$store.state.storeInfo.storeCode
      const { data, status } = await storeRoleFindList(storeCode);
      console.log(data);
      if (status == 200 && data.code == 200) {
        this.tableLoading = false;
        this.roleFindPage();
        this.cashierData = data.data;
      } else {
        this.$Message.error(data.message);
      }
    },
    // 权限设置
    async findAllMenu() {
      const Loading = this.$myLoading({
        content: "正在获取权限列表…"
      });
      const { data, status } = await findAllMenu();
      // console.log(data)
      if (status == 200 && data.code == 200) {
        this.disposeRoleData(data.data)
        Loading.close();
      }
    },
    // 处理权限菜单，区分商家后台和移动应用
    disposeRoleData(roleList) {
      let newJson = roleList;
      let webAdminRoles = [];
      let mobileAppRoles = [];
      for (let i = 0; i < newJson.length; i++) {
        let jsonTile = newJson[i];
        jsonTile.expand = false;
        if (jsonTile.title != "首页") {
          if (jsonTile.menuType == 0) {
            webAdminRoles.push(jsonTile);
          } else {
            mobileAppRoles.push(jsonTile);
          }
        }
      }

      localStorage.setItem('webAdminRoles', JSON.stringify(webAdminRoles));
      localStorage.setItem('mobileAppRoles', JSON.stringify(mobileAppRoles));

      this.webAdminTreeDataBak = webAdminRoles;
      this.mobileAppTreeDataBak = mobileAppRoles;
      this.webAdminTreeData[0].children = JSON.parse(JSON.stringify(webAdminRoles));
      this.mobileAppTreeData[0].children = JSON.parse(JSON.stringify(mobileAppRoles));

      if (this.isNeedShowSelected) {
        this.showSelectedRoles();
      }
    },
    // 保存角色
    async saveRole() {
      let storeInfoJSON = localStorage.getItem('storeInfo');
      let storeInfo = JSON.parse(storeInfoJSON);
      const item = {
        createBy: storeInfo.userPhone,
        menuAuthen: this.formItem.roleAuthen,
        roleName: this.formItem.roleName,
        storeCode: storeInfo.storeCode
      };
      this.Loading = this.$myLoading({ content: "正在保存,请稍等..." });
      const { data, status } = await roleSave(item);
      if (status == 200 && data.code == 200) {
        setTimeout(() => {
          let roleNames = this.formItem.roleName;
          let roleAuthen = this.formItem.roleAuthen;
          let newDate = new Date();
          console.log(newDate);
          let JsonData = {
            roleName: roleNames,
            createTime: Format(newDate, "yy-MM-dd hh:mm:ss"),
            menuAuthen: roleAuthen,
            registFlag: true,
            source: 0,
            roleStatus: 1
          };
          this.cashierData.unshift(JsonData);
          this.showModalRole = false;
          this.Loading.close();
          this.$Message.success("保存成功!");
        }, 1000);
      } else {
        this.loading = false;
        this.Loading.close();
        this.$Message.error(data.message);
      }
    },
    // 修改角色信息
    async modifyUpdate() {
      let storeInfoJSON = localStorage.getItem('storeInfo');
      let storeInfo = JSON.parse(storeInfoJSON);
      const item = {
        createBy: storeInfo.userPhone,
        id: this.cashierData[this.formIndex].id,
        menuAuthen: this.formItem.roleAuthen,
        roleName: this.formItem.roleName,
        storeCode: storeInfo.storeCode
      };
      const Loading = this.$myLoading({
        content: "正在保存，请稍后…"
      });
      const { data, status } = await roleUpdate(item);
      if (status == 200 && data.code == 200) {
        setTimeout(() => {
          this.cashierData[this.formIndex].roleName = this.formItem.roleName;
          this.cashierData[this.formIndex].menuAuthen = this.formItem.roleAuthen;
          this.closeModal();
          Loading.close();
        }, 1000);
      } else {
        this.loading = false;
        Loading.close();
        this.$Message.error(data.message);
      }
    },
    // 分页查询
    async roleFindPage() {
      this.tableLoading = true;
      let fastQuery = this.fastQuery;
      let page = this.pageNum;
      let pageSize = this.pageSize;
      // let pid = this.pid;
      const { data, status } = await roleFindPage({
        fastQuery,
        page,
        pageSize
      });
      if (data.code == 200 && status == 200) {
        this.cashierData = data.data.list;
        this.total = data.data.total;
      } else {
        this.cashierData = [];
        this.$Message.info(data.message);
      }
      this.tableLoading = false;
    }
  },
  mounted() {
    this.init();
  }
};
</script>

<style scoped>
.joininBox {
  margin-top: 15px;
}
.iview-selectTitle {
  float: left;
  line-height: 36px;
  margin-right: 15px;
}
.form-box {
  height: 400px;
  overflow: auto;
}
.treeMtop {
  margin-top: -7px;
}
.role-setting-item {
  margin-top: -110px;
}
.role-category-business {
  display: block;
  margin: 60px 0 0 15px;
}
.role-category-business-selected {
  display: block;
  margin: 60px 0 0 15px;
  box-shadow: 0 0 0 2px rgba(45, 140, 240, 0.2);
}
.role-category-app {
  display: block;
  margin: 15px 0 0 15px;
}
.role-category-app-selected {
  display: block;
  margin: 15px 0 0 15px;
  box-shadow: 0 0 0 2px rgba(45, 140, 240, 0.2);
}
</style>
